<script lang="ts">
	import { PUBLIC_SERVER_URL } from "$env/static/public";
	import { Chat } from "@ai-sdk/svelte";
	import { DefaultChatTransport } from "ai";

	let input = $state("");
	const chat = new Chat({
		transport: new DefaultChatTransport({
			api: `${PUBLIC_SERVER_URL}/ai`,
		}),
	});

	let messagesEndElement: HTMLDivElement | null = null;

	$effect(() => {
		if (chat.messages.length > 0) {
			setTimeout(() => {
				messagesEndElement?.scrollIntoView({ behavior: "smooth" });
			}, 0);
		}
	});

	function handleSubmit(e: Event) {
		e.preventDefault();
		const text = input.trim();
		if (!text) return;
		chat.sendMessage({ text });
		input = "";
	}
</script>

<div
	class="mx-auto grid h-full w-full max-w-2xl grid-rows-[1fr_auto] overflow-hidden p-4"
>
	<div class="mb-4 space-y-4 overflow-y-auto pb-4">
		{#if chat.messages.length === 0}
			<div class="mt-8 text-center text-neutral-500">
				Ask me anything to get started!
			</div>
		{/if}

		{#each chat.messages as message (message.id)}
			<div
				class="p-3 rounded-lg w-fit max-w-[85%] text-sm md:text-base"
				class:ml-auto={message.role === "user"}
				class:bg-primary={message.role === "user"}
				class:bg-secondary={message.role === "assistant"}
			>
				<p
					class="mb-1 text-sm font-semibold"
					class:text-indigo-600={message.role === "user"}
					class:text-neutral-400={message.role === "assistant"}
				>
					{message.role === "user" ? "You" : "AI Assistant"}
				</p>
				<div class="whitespace-pre-wrap break-words">
					{#each message.parts as part, partIndex (partIndex)}
						{#if part.type === "text"}
							{part.text}
						{/if}
					{/each}
				</div>
			</div>
		{/each}
		<div bind:this={messagesEndElement}></div>
	</div>

	<form
		onsubmit={handleSubmit}
		class="w-full flex items-center space-x-2 pt-2 border-t"
	>
		<input
			name="prompt"
			bind:value={input}
			placeholder="Type your message..."
			class="flex-1 rounded border border-neutral-600 bg-neutral-800 px-3 py-2 text-neutral-100 placeholder-neutral-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-50"
			autocomplete="off"
			onkeydown={(e) => {
				if (e.key === "Enter" && !e.shiftKey) {
					e.preventDefault();
					handleSubmit(e);
				}
			}}
		/>
		<button
			type="submit"
			disabled={!input.trim()}
			class="inline-flex h-10 w-10 items-center justify-center rounded bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50"
			aria-label="Send message"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="18"
				height="18"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
			>
				<path d="m22 2-7 20-4-9-9-4Z" />
				<path d="M22 2 11 13" />
			</svg>
		</button>
	</form>
</div>
